Number.prototype.toCNY = function(){
  return '￥' + Number(this).toFixed(2);
}

//静态数据，一般真实的项目，这些数据来源于后端，也就是从数据库读取过来的。
var fruit = [
  {id:1, place: '山东', name:'苹果1', price: 5, addtime:'2021-08-30'},
  {id:2, place: '江西', name:'桔子', price: 2, addtime:'2021-08-27'},
  {id:3, place: '海南岛', name:'香蕉', price: 3, addtime:'2021-08-26'},
  {id:4, place: '海南岛', name:'菠萝', price: 6, addtime:'2021-08-29'},
  {id:5, place: '新疆', name:'葡萄', price: 12, addtime:'2021-08-24'},
  {id:6, place: '山东', name:'苹果2', price: 7, addtime:'2021-08-26'},
  {id:7, place: '山东', name:'苹果3', price: 8, addtime:'2021-08-31'},
  {id:8, place: '山东', name:'苹果4', price: 4, addtime:'2021-09-1'},
  {id:9, place: '泰国', name:'山竹', price: 12, addtime:'2021-09-2'},
];

//集成 create read update delete search sort pagination 这些功能

//定义全局变量方便在函数之间传参
var place = '';           // 产地
var keyword = '';         // 关键字
var startPrice = '';      // 起始单价
var endPrice = '';        // 结束单价

//排序相关配置
var sortField = 'id';    // 按id字段排序
var sortType = 'number'; // 按数值排序
var sortState = 0;       // 0 不排序  1 升序  -1 降序

//分页配置
var cpage = 1;           // 缓存当前页
var perpage = 3;         // 每页分多少条


//一刷新页面就读取列表
read();

//搜索
function search(){

  //同步到全局 注意select 如果取了id号，不能直接使用id，要getElementById，不然找不到对象
  place = document.getElementById('origin').value;
  keyword = word.value.trim();
  startPrice = +price1.value;
  endPrice = +price2.value;

  //刷新
  read();
}

//排序
function sortBy( th, field, type='string'){

  // 清除所有的排序标识，并设置除当前单击的th以外所有的状态初始化为0
  document.querySelectorAll('.sort').forEach(function(_th){
    if( th !== _th ) _th.state = 0;
    _th.className = 'sort';
  })

  th.state = !th.state ? 1 : (th.state===1?-1:0);

  var clsName = { 
    0: 'sort', 
    1: 'sort asc', 
    '-1': 'sort desc'
  };

  th.className = clsName[th.state];

  //同步到全局
  sortField = field;
  sortType = type;
  sortState = th.state;

  //刷新
  read();

}

//水果列表
function read( page = 1 ){

  //定义列表临时模板，用于累积循环的表格行
  var listTemp = '';  

  //1.搜索功能 （第一次刷新 就开始搜索 搜索关键字为空字符串）
  var searchData = fruit.filter(function(item){
    return ( place ? item.place === place : true ) &&
          ( keyword ? item.name.includes( keyword ) : true ) &&
          ( ( startPrice? item.price >= startPrice : true) && ( endPrice? item.price <= endPrice : true) )
  });

  // 表示 searchData = [] 空数组
  if( !searchData.length ) {
    listTemp = '<tr><td colspan="999" class="center">没有找到数据！</td></tr>'
  }

  //2. 排序功能

  //因为排序会破坏原始数组，所以复制一份搜索的数组
  var sortData = [].concat( searchData );

  sortData.sort(function(a,b){
    if( sortType==='number' ){
      return (a[sortField] - b[sortField]) * sortState;
    }else if( sortType==='date' ){
      return ( Date.parse(a[sortField]) - Date.parse( b[sortField]) ) * sortState;
    }else{
      return String(a[sortField]).localeCompare( String(b[sortField]) ) * sortState;
    }
  });

  //3. 分页功能
  var total = sortData.length;                 //总记录
  var totalpage = Math.ceil( total/perpage );  //总页数

  if(page > totalpage) page -= 1;
  cpage = page;                                //把当前页面赋值给全局变量，保持同步

  //按照指定的页码分割数组
  var start = (page - 1) * perpage;
  var end = start + perpage;

  //分割数组
  var pageData = sortData.slice(start, end);
  
  pageData.forEach(function( item, i ){
    var index = start + i; //0 1 2 3 4 5 6 7 
    listTemp += `
    <tr>
      <td class="center"><input type="checkbox" name="id" value="${item.id}"></td>
      <td>${index+1}</td>
      <td>${item.name}</td>
      <td>${item.place}</td>
      <td class="right"> <em>${item.price.toCNY()}</em></td>
      <td>${item.addtime}</td>
      <td>
        <button class="btn" onclick="edit(${item.id})">修改</button>
        <button class="btn" onclick="del([${item.id}])">删除</button>
      </td>
    </tr>`;
  })

  list.innerHTML = listTemp;


  //定义页码临时模板，用于累积循环
  var pageTemp = '';
  pageTemp += `<button onclick="read(${page-1})" ${page===1?'disabled':''}>上页</button>`;  
  for(var p=1; p<=totalpage; p++){
    pageTemp += `<button onclick="read(${p})" class="${p===page?'active':''}">${p}</button>`;
  }
  pageTemp += `<button onclick="read(${page+1})" ${page===totalpage?'disabled':''}>下页</button>`;  
  pager.innerHTML = pageTemp;

}

//添加操作
function add(){

  var id = fruit.length + 1;
  var name = prompt('请输入水果名称！');
  var place = prompt('请输入水果产地！');
  var price = +prompt('请输入水果单价（数值）！');
  var addtime = new Date().toLocaleDateString();

  if(name && price){
    //1. 往第一页开头追加
    // fruit.unshift({id,name,price,addtime});
    // read( 1 );

    //2. 往最后一页追加
    fruit.push({id,name,place,price,addtime});
    var totalpage = Math.ceil(fruit.length/perpage);
    read( totalpage );
  }
  
}

//修改操作
function edit( id ){

  //find 和 filter有点类似，filter返回数组，find返回数组成员
  var row = fruit.find(function(item){
    return item.id === id;
  })

  var name = prompt('请输入水果名称！', row.name);
  var price = +prompt('请输入水果单价（数值）！', row.price);

  if(name && price){

    //1. 根据索引值修改
    // var i = fruit.findIndex(function(item){
    //   return item.id === id;
    // })
    // fruit[i].name = name;
    // fruit[i].price = price;
    // read( cpage );

    //2. 根据map高阶函数 ，map返回新数组，需要覆盖
    fruit = fruit.map(function(item){
      if(item.id === id) {
        item.name = name;
        item.price = price;
      }
      return item;
    })

    read( cpage );

  }

}

//删除操作
function del( ids ){

  if(confirm('您确定要删除吗？')){
    fruit = fruit.filter(function(item){
      return ids.indexOf(item.id) === -1;
    })

    read( cpage );

    //去掉全选前面的打勾
    all.checked = false;

  }else{
    //设置全选的状态为不打勾
    all.checked = false;
    checkAll( all );
  }

}

//全选取消全选操作
function checkAll(){
  document.querySelectorAll('[name="id"]').forEach(function( input ){
    input.checked = all.checked;
  })
}

//批量删除操作
function batchDel(){

  var ids = [];
  //[name="id"]:checked 表示找到所有倒勾的复选框
  document.querySelectorAll('[name="id"]:checked').forEach(function( input ){
    ids.push(+input.value);
  });

  if( !ids.length ){
    alert('请至少选择一项！');
    return;
  }

  //调用删除操作
  del( ids );

}